<template>
  <md-popover
    popper-class="mb-layout-item-settings-menu-popover"
    :visible-arrow="false"
    placement="right-start"
    v-model="value"
  >
    <md-radio-group v-model="radio" @change="changeValue">
      <md-radio label="cover">原尺寸</md-radio>
      <md-radio label="contain">等比适应</md-radio>
      <md-radio label="fill">适应组件</md-radio>
    </md-radio-group>
    <template #reference>
      <slot> </slot>
    </template>
  </md-popover>
</template>

<script>
export default {
  name: 'settings-menu',
  props: ['fit', 'onChange'],
  data() {
    return {
      value: false,
      radio: this.fit,
    };
  },
  methods: {
    changeValue(value) {
      this.onChange?.(value);
      this.value = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.mb-layout-item-settings-menu.mb-layout-item-settings-menu {
  display: flex;
  flex-direction: column;

  & > button {
    margin: var(--md-spacing-1);
  }
}
</style>

<style lang="scss">
.mb-layout-item-settings-menu-popover.mb-layout-item-settings-menu-popover {
  min-width: unset;
  padding: var(--md-spacing-1);
  border: 0;
  background-color: rgb(var(--md-color-6));
}
</style>
